<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>服务体系</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/app.css" />
		<script src="../js/lib/remtest.js" type="text/javascript"></script>
		<script type="text/javascript" src="../js/iconfont.js"></script>
		<script type="text/javascript" src="../js/lib/jquery-1.10.2.min.js"></script>
		<link rel="stylesheet" href="../css/swiper.min.css">
		<style type="text/css">
			body {
				font-family: "microsoft yahei";
			}
			
			.iconzs {
				width: 1em;
				height: 1em;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
			
			.mui-card-link .mui-icon {
				font-size: 18px;
				color: #8a8a8a;
			}
			
			.mui-card-header.mui-card-media .mui-media-body {
				font-size: 15px;
				font-weight: 500;
				line-height: 24px;
				margin-bottom: 0;
				margin-left: 0px;
				color: #333;
			}
			
			.mui-card-header.mui-card-media .mui-media-body h4 {
				font-size: 16px;
				line-height: 24px;
				width: 100%;
				color: #313131;
				position: relative;
			}
			
			.mui-card-header.mui-card-media .mui-media-body p {
				font-size: 13px;
				margin-bottom: 0;
				line-height: 20px;
				padding-top: 10px;
			}
			
			.xianqing {
				width: 0.5em;
				height: 0.5em;
				display: block;
			}
			
			.rightqj {
				display: inline-block;
			}
			
			.mui-card-footer:before,
			.mui-card-header:after {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				height: 0px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.mui-table-view-cell {
				position: relative;
				overflow: hidden;
				padding: 0.16rem 0.67rem;
				font-size: 0.16rem !important;
				height: 0.98rem;
			}
			
			.mui-card-header:after {
				top: auto;
				height: 1px;
				bottom: 0;
				width: 90%;
				margin: 0 auto;
				text-align: center;
			}
			
			.mui-table-view {
				position: relative;
				margin-top: 0;
				margin-bottom: 0;
				padding-left: 0;
				list-style: none;
				background-color: rgba(0, 0, 0, 0);
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell {
				font-size: 17px;
				display: inline-block;
				margin-right: -4px;
				padding: 10px 0 0 10px;
				text-align: center;
				vertical-align: middle;
				background: 0 0;
			}
			
			.mui-table-view.mui-grid-view {
				font-size: 0;
				display: block;
				width: 100%;
				padding: 0 0px 10px 0;
				white-space: normal;
			}
			
			.zixuntit {
				background: url(../images/fwtx1.png) no-repeat center;
				height: 2.25rem;
				width: 2.25rem !important;
				width: 100%;
				border-radius: 8px;
				background-size: cover;
				box-shadow: 2px 8px 2px #dbdbdb;
			}
			
			.zixuntit.on {
				box-shadow: 2px 8px 2px #ffd964;
			}
			
			.zixuntit .iconzs {
				font-size: 50px;
				margin-top: 20px;
			}
			
			.zixuntit .ltit {
				line-height: 40px;
				color: #FFFFFF;
			}
			
			.iconzsb {
				font-size: 0.66rem;
			}
			
			.neirwz {
				font-size: 0.22rem !important;
				padding-left: 0.3rem;
			}
			
			.swiper-container {
				width: 100%;
				height: 100%;
			}
			
			.swiper-container {
				margin-left: auto;
				margin-right: auto;
				position: relative;
				overflow: hidden;
				z-index: 1;
				padding: 0.22rem 0;
			}
			
			.swiper-slide {
				text-align: center;
				font-size: 18px;
				/* Center slide text vertically */
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			
			.mui-grid-view li {
				float: left;
			}
			
			.mui-content {
				background: #FFFFFF !important;
			}
			
			.hqp1.td1 {
				width: 0.66rem;
			}
			
			.hqp1.td2 {
				width: 1.94rem;
				padding-left: 0.1rem;
			}
			
			.hqp1.td3 {
				width: 0.66rem;
			}
			
			.hqp1.td4 {
				padding-left: 0.1rem;
			}
			/*弹窗*/
			
			#tanchuang {
				display: none;
				z-index: 15151515;
			}
			
			.app-download-popup.show {
				display: block;
			}
			
			.app-download-popup {
				display: none;
				position: fixed;
				overflow: auto;
				width: 100%;
				height: 100%;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: rgba(0, 0, 0, .8);
			}
			
			.app-download-popup.smally .app-download-popup-inner {
				width: 5.8rem;
				border-radius: 6px;
				height: auto;
				overflow: visible;
				top: 1rem;
				margin-bottom: 0.4rem;
			}
			
			.app-download-popup .app-download-popup-inner {
				position: relative;
				width: 100%;
				height: 100%;
				background-size: cover;
				background-repeat: no-repeat;
				margin: 0 auto;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
				overflow-scrolling: touch;
			}
			
			.app-download-popup.smally .btn-close {
				top: -35px;
				background-image: url(../images/colesebnt.png);
			}
			
			.app-download-popup .btn-close {
				position: absolute;
				display: block;
				top: 1px;
				right: 1px;
				width: 32px;
				height: 32px;
				background-image: url(../images/colesebnt.png);
				background-repeat: no-repeat;
				background-size: contain;
			}
			
			.app-download-popup .banner {
				width: 100%;
			}
			
			.app-download-popup .btn-wrapper {
				text-align: center;
			}
			
			.app-download-popup .btn-download {
				position: relative;
				display: inline-block;
				color: #fff;
				font-size: 18px;
				margin-top: 5px;
				padding: 8px 30px 8px 20px;
				background-color: #e8203d;
				border-radius: 6px;
				box-shadow: 0 5px 2px #900E21;
				outline: 0;
				text-decoration: none;
			}
			
			.app-download-popup.smally .btn-hide {
				color: red;
			}
			
			.app-download-popup .btn-hide {
				display: inline-block;
				margin-top: 18px;
				margin-bottom: 8px;
				font-size: 18px;
				color: #A81C33;
				color: #fff;
				background-color: transparent;
				border: 0;
				outline: 0;
			}
			
			.txnrli {
				height: 1.18rem;
				padding: 0.2rem 0 !important;
				overflow: hidden;
			}
			
			.txnrli .iconzs {
				font-size: 0.46rem;
			}
			
			.txnrli .neirtd1 {
				width: 1.2rem;
				text-align: center;
				padding-left: 0.3rem;
			}
			
			.txnrli .neirtd1 p {
				font-size: 0.14rem !important;
			}
			
			.txnrli .neirtd2 {
				width: 3.85rem;
				font-size: 0.2rem;
				padding-left: 0.3rem;
			}
		</style>
	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">首页</h1>
		</header>-->

		<div class="mui-content">

			<div class="swiper-container mui-row">

				<div class="swiper-wrapper ">

					<div class="swiper-slide mui-col-sm-4">

						<div class="zixuntit on" id="dy8" style="background: url(../images/fwtx0a.png) no-repeat center;background-size: cover;">

						</div>
					</div>
					<div class="swiper-slide mui-col-sm-4">
						<div class="zixuntit" style="background: url(../images/fwtx1.png) no-repeat center;background-size: cover;">
						</div>
					</div>

					<div class="swiper-slide mui-col-sm-4">

						<div class="zixuntit" style="background: url(../images/fwtx2.png) no-repeat center;background-size: cover;">

						</div>
					</div>

					<div class="swiper-slide">

						<div class="zixuntit" style="background: url(../images/fwtx3.png) no-repeat center;background-size: cover;">

						</div>
					</div>

					<div class="swiper-slide">

						<div class="zixuntit" style="background: url(../images/fwtx4.png) no-repeat center;background-size: cover;">

						</div>
					</div>

					<!-- Add Pagination -->
				</div>
				</ul>
			</div>

		</div>

		<div class="mui-card">
			<ul class="mui-table-view">

				<li class="mui-table-view-cell">

					<table class="hqtable">
						<tr>
							<td class="hqp1 td1">
								<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-caijingrili"></use>
								</svg>
		                   	 </span></td>
							<td class="hqp1 td2">
								<span class="neirwz">财经日历</span></td>

							<td class="hqp1 td3">
								<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-zhongchengneican"></use>
								</svg>
		                   	 </span></td>
							<td class="hqp1 td4">
								<span class="neirwz">中诚内参</span></td>

						</tr>
					</table>

				</li>

				<li class="mui-table-view-cell">

					<table class="hqtable">
						<tr>

							<td class="hqp1 td1">
								<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-jichujiaoxue"></use>
								</svg>
		                   	 </span></td>
							<td class="hqp1 td2">
								<span class="neirwz">基础教学</span></td>

							<td class="hqp1 td3">
								<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-yuyinzhibo"></use>
								</svg>
		                   	 </span></td>
							<td class="hqp1 td4">
								<span class="neirwz">语音直播</span></td>

						</tr>
					</table>

				</li>

				<li class="mui-table-view-cell">

					<table class="hqtable">
						<tr>
							<td class="hqp1 td1">
								<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-Kxianshierjueji"></use>
								</svg>
		                   	 </span></td>
							<td class="hqp1 td2">
								<span class="neirwz">K线十二绝技</span></td>

							<td class="hqp1 td3">
								<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-zhuanshutougu"></use>
								</svg>
		                   	 </span></td>
							<td class="hqp1 td4">
								<span class="neirwz">专属投顾</span></td>

						</tr>
					</table>

				</li>

				<li class="mui-table-view-cell">

					<table class="hqtable">
						<tr>
							<td class="hqp1 td1">
								<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb gbl" id="gl1" >
 									 <use xlink:href="#icon-shizhanjiaoxue"  gl="#icon-shizhanjiaoxue1" bl="#icon-shizhanjiaoxue"></use>
								</svg>
		                   	 </span></td>
							<td class="hqp1 td2">
								<span class="neirwz">实战教学</span></td>

							<td class="hqp1 td3">
								<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb gbl"  id="gl2">
 									 <use xlink:href="#icon-gaojifuwu" gl="#icon-gaojifuwu1" bl="#icon-gaojifuwu"></use>
								</svg>
		                   	 </span></td>
							<td class="hqp1 td4">
								<span class="neirwz">高级研究员</span></td>

						</tr>
					</table>

				</li>

				<li class="mui-table-view-cell">

					<table class="hqtable">
						<tr>
							<td class="hqp1 td1">
								<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb gbl" id="gl3">
 									 <use xlink:href="#icon-VIPzhuanxian" gl="#icon-VIPzhuanxian1" bl="#icon-VIPzhuanxian"></use>
								</svg>
		                   	 </span></td>
							<td class="hqp1 td2">
								<span class="neirwz">VIP专线</span></td>

							<td class="hqp1 td3">
								<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb gbl" id="gl4">
 									 <use xlink:href="#icon-dingzhifuwu" gl="#icon-dingzhifuwu1" bl="#icon-dingzhifuwu"></use>
								</svg>
		                   	 </span></td>
							<td class="hqp1 td4">
								<span class="neirwz">订制服务</span></td>

						</tr>
					</table>

				</li>

			</ul>

		</div>

		<!--弹窗-->
		<div class="app-download-popup smally show" data-spm="app-download-popup" id="tanchuang">
			<div class="app-download-popup-inner" style="background:#FFFFFF">
				<i class="btn-close" onclick="closetc()"></i>

				<h2 style="font-size: 0.30rem;text-align: center; padding: 0.2rem 0;">服务内容</h2>

				<ul class="mui-table-view">

					<li class="mui-table-view-cell txnrli">

						<table class="hqtable">
							<tr>
								<td class="tt neirtd1">
									<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-caijingrili"></use>
								</svg>
		                   	 </span>
									<p>财经日历</p>
								</td>

								<td class="hqp1 neirtd2">
									<span class="jstx">云采集，大数据分析，及时的捕捉市场重大财经新闻数据，全面深入的分析，提供第一手的市场动态
		                   </span></td>

							</tr>
						</table>

					</li>

					<li class="mui-table-view-cell txnrli">

						<table class="hqtable">
							<tr>
								<td class="tt neirtd1">
									<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-caijingrili"></use>
								</svg>
		                   	 </span>
									<p>中诚内参</p>
								</td>
								<td class="hqp1 neirtd2">
									<span class="jstx">金融大咖独家解读，盘面动向及时掌握，一参
在手，投资无忧。
		                   </span></td>

							</tr>
						</table>

					</li>

					<li class="mui-table-view-cell txnrli">

						<table class="hqtable">
							<tr>
								<td class="tt neirtd1">
									<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-caijingrili"></use>
								</svg>
		                   	 </span>
									<p>财经日历</p>
								</td>
								<td class="hqp1 neirtd2">
									<span class="jstx">云采集，大数据分析，及时的捕捉市场重大财经新闻数据，全面深入的分析，提供第一手的市场动态
		                   </span></td>

							</tr>
						</table>

					</li>

					<li class="mui-table-view-cell txnrli">

						<table class="hqtable">
							<tr>
								<td class="tt neirtd1">
									<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-jichujiaoxue"></use>
								</svg>
		                   	 </span>
									<p>基础教学</p>
								</td>
								<td class="hqp1 neirtd2">
									<span class="jstx">各大分析师盘中坐阵实时讲解盘面行情以及操
作建议。
		                   </span></td>

							</tr>
						</table>

					</li>

					<li class="mui-table-view-cell txnrli">

						<table class="hqtable">
							<tr>
								<td class="tt neirtd1">
									<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-yuyinzhibo"></use>
								</svg>
		                   	 </span>
									<p>语音直播</p>
								</td>
								<td class="hqp1 neirtd2">
									<span class="jstx">大行情大数据，语音现场直播，赚钱行情及
时把握 。</span></td>

							</tr>
						</table>

					</li>

					<li class="mui-table-view-cell txnrli">

						<table class="hqtable">
							<tr>
								<td class="tt neirtd1">
									<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-Kxianshierjueji"></use>
								</svg>
		                   	 </span>
									<p>k线十二绝技</p>
								</td>
								<td class="hqp1 neirtd2">
									<span class="jstx">汇聚中诚研究院数十位专家老师多年实战成果
编撰，最实用的操盘技巧，最有效的投资策略
尽在其中。</span></td>

							</tr>
						</table>

					</li>

					<li class="mui-table-view-cell txnrli">

						<table class="hqtable">
							<tr>
								<td class="tt neirtd1">
									<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-zhuanshutougu"></use>
								</svg>
		                   	 </span>
									<p>专属投顾</p>
								</td>
								<td class="hqp1 neirtd2">
									<span class="jstx">配备专业投顾指导，为你的账户提供贴心管
理，日常交易突发状况紧急电话告知。</span></td>

							</tr>
						</table>

					</li>

					<li class="mui-table-view-cell txnrli">

						<table class="hqtable">
							<tr>
								<td class="tt neirtd1">
									<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-shizhanjiaoxue1"></use>
								</svg>
		                   	 </span>
									<p>实战教学</p>
								</td>
								<td class="hqp1 neirtd2">
									<span class="jstx">全天候直播互动服务，重大事件（非农、美联
储议息会议等）更有专家老师亲自教学。</span></td>

							</tr>
						</table>

					</li>

					<li class="mui-table-view-cell txnrli">

						<table class="hqtable">
							<tr>
								<td class="tt neirtd1">
									<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-gaojifuwu1"></use>
								</svg>
		                   	 </span>
									<p>高级研究员</p>
								</td>
								<td class="hqp1 neirtd2">
									<span class="jstx">专家老师一对一为您的帐户诊断服务。</span></td>

							</tr>
						</table>

					</li>

					<li class="mui-table-view-cell txnrli">

						<table class="hqtable">
							<tr>
								<td class="tt neirtd1">
									<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-VIPzhuanxian1"></use>
								</svg>
		                   	 </span>
									<p>VIP专线</p>
								</td>
								<td class="hqp1 neirtd2">
									<span class="jstx">专属私人专线，专家直通车。</span></td>

							</tr>
						</table>

					</li>

					<li class="mui-table-view-cell txnrli">

						<table class="hqtable">
							<tr>
								<td class="tt neirtd1">
									<span class="mui-icon">	                    	
		                  	<svg class="iconzs iconzsb" >
 									 <use xlink:href="#icon-dingzhifuwu1"></use>
								</svg>
		                   	 </span>
									<p>专属定制</p>
								</td>
								<td class="hqp1 neirtd2">
									<span class="jstx">我们顶级团队根据你的账号以及需求为你提供
全方位的订制服务 本套餐级别的其他特色服务。</span></td>

							</tr>
						</table>

					</li>

				</ul>

				<!--<div class="btn-wrapper">
					<a class="btn-download" onclick="">点击查看</a>
				</div>
				<div class="btn-wrapper"><button class="btn-hide" onclick="closetc()">继续浏览</button></div>-->
			</div>
		</div>

		<script type="text/javascript" src="../js/Common.js"></script>
		<script src="../js/mui.min.js"></script>

		<script type="text/javascript" charset="utf-8">
			/*选项卡*/

			jq = $.noConflict();

			mui.init({
				swipeBack: false
			});
			
			function openInfo(){
				//console.log(document.getElementById('tanchuang').outerHTML);
				 
				jq('#tanchuang').show();
			}
			function closetc(){
				jq('#tanchuang').hide();
				document.getElementById('tanchuang').style.display="none";
			}

			(function($) {

				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if(this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
				mui('body').on('tap', 'td', function() {
					//openInfo();
					//openWindowWithTitle('fwtxnr.html', '' + this.innerText);
				});
				/*document.getElementsByTagName('td').addEventListener('tap',function(){
					
				});*/
			})(mui);

			function ggl(ids) {
				var gltest = jq(ids).find("use").attr("gl");
				console.log(gltest);
				jq(ids).find("use").attr("xlink:href", gltest);
			};

			function bbl() {

				for(var a = 0; a <= jq(".gbl").length; a++) {
					var ats = jq(".gbl").eq(a).find("use").attr("bl");
					jq(".gbl").eq(a).find("use").attr("xlink:href", ats);
				};

			};

			jq.each(jq(".zixuntit"), function(index, item) {

				jq(item).on('tap', function() {
					jq(".zixuntit").removeClass("on");
					jq(this).removeClass("on").addClass("on").siblings().removeClass("on");

					var jqzu = jq(".zixuntit");
					for(var s = 0; s < jqzu.length; s++) {
						jq(".zixuntit").eq(s).css({
							"background-image": "url(../images/fwtx" + s + ".png)"
						});
					}

					jq(this).css("background-image", "url(../images/fwtx" + index + "a.png)");

					bbl();
					if(index == 1) {
						bbl();
						ggl(gl1);
					} else if(index == 2) {
						bbl();
						ggl(gl1);
						ggl(gl2);
					} else if(index == 3) {
						bbl();
						ggl(gl1);
						ggl(gl2);
						ggl(gl3);
					} else if(index == 4) {
						bbl();
						ggl(gl1);
						ggl(gl2);
						ggl(gl3);
						ggl(gl4);
					}

				});

			});
		</script>
		<script src="../js/swiper.min.js"></script>

		<!-- Initialize Swiper -->
		<script>
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				slidesPerView: 2.6,
				paginationClickable: true,
				spaceBetween: 10

			});
		</script>
	</body>

</html>